import React from 'react';
import {Modal, Form, InputNumber, Input, Select, Switch, DatePicker} from 'antd';
import styles from './style.less';

const formLayout = { labelCol: { span: 7 }, wrapperCol: { span: 13 } };
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

@Form.create()
export default class UserActionModal extends React.PureComponent {
  static defaultProps = {
    title: '编辑',
    visible: false,
    confirmLoading: false,
    onOk: () => {},
    onCancel: () => {},
    modalAction: '',
    data: {},
  };

  handleOk = () => {
    const { form, onOk } = this.props;
    form.validateFields((errors, values) => {
      if (errors) return;
      onOk(values);
    })
  };

  getModalContent = () => {
    const { form, modalAction, data } = this.props;
    if (modalAction === 'Freeze') {
      return (
        <>
          <FormItem {...formLayout} label="冻结到期时间">
            {form.getFieldDecorator('dueTime')(<DatePicker />)}
          </FormItem>
          <FormItem {...formLayout} label="冻结原因">
            {form.getFieldDecorator('reason', {
              rules: [{ required: true, message: '请填写冻结原因' }],
            })(<TextArea autosize={{ minRows: 5 }} />)}
          </FormItem>
        </>
      )
    }
    if (modalAction === 'ResetPassword') {
      return (
        <>
          <FormItem {...formLayout} label="密码">
            {form.getFieldDecorator('password', {
              rules: [
                { required: true, message: '密码不能为空' },
              ],
            })(<Input.Password />)}
          </FormItem>
        </>
      )
    }
    return <></>
  };

  render() {
    const { title, visible, confirmLoading, onCancel } = this.props;
    return (
      <Modal
        title={title}
        className={styles.standardListForm}
        width={640}
        destroyOnClose
        maskClosable={false}
        visible={visible}
        confirmLoading={confirmLoading}
        onOk={this.handleOk}
        onCancel={onCancel}
      >
        {this.getModalContent()}
      </Modal>
    )
  }
}
